<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
            <h4 class="modal-title">选取图片</h4>
        </div>
        <div class="modal-body">
            <input type="hidden" id="checks" value="{$Think.get.checks}">
            <div class="pictures row">
                <volist name="pictures" id="vo">
                    <div class="col-xs-3">
                      <div <if condition="in_array($vo['id'],$checks)">class="item checked"<else />class="item"</if> title="点击选取 {$vo.name}" data-id="{$vo.id}">
                          <div class="check">
                            <i class="icon icon-check"></i>
                          </div>
                          <img src="{$vo.path|getImgpath}" alt="{$vo.name}">
                          <p class="text-ellipsis">{$vo.name}</p>
                      </div>
                    </div>
                </volist>
            </div>
        </div>
        <div class="modal-footer">
            <div class="check-tips">
                <span class="text-danger">只能选择1张图片</span>
            </div>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消选择</button>
            <button type="button" class="btn btn-success btn-check">确认选择 <span class="badge bg-success check-sum">0</span></button>
        </div>
    </div>
</div>
<style media="screen">
    .pictures{
      overflow: hidden;
      max-height: 320px;
      overflow: auto;
    }
    .pictures .item{
      float: left;
      width: 100%;
      cursor: pointer;
      border: 3px transparent solid;
      position: relative;
      margin-bottom: 15px;
    }
    .pictures .item:hover,.pictures .item.checked{
      border-color: #38b03f;
    }
    .pictures .item:hover .check,.pictures .item.checked .check{
      display: block;
    }
    .pictures .item .check{
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -15px;
      margin-top: -27px;
      width: 30px;
      height: 30px;
      padding: 5px;
      text-align: center;
      color: #fff;
      background: #38b03f;
      border-radius: 50%;
    }
    .pictures .item .check i{
      font-size: 20px;
    }
    .pictures .item img{
      width: 100%;
      height: 100px;
    }
    .pictures .item p{
      line-height: 24px;
      padding-left: 5PX;
      margin: 0;
    }
    .check-tips{
      float: left;
    }
    .btn-check{
      position: relative;
    }
    .btn-check .badge{
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      border: 1px #fff solid;
      font-size: 11px;
    }
</style>
<script type="text/javascript">
    $(".pictures .item").on('click',function(){
        $(this).toggleClass("checked");
        $(".check-sum").text($(".pictures .item.checked").size());
    })
    $(".btn-check").on('click',function(){
        var checkarr = [],checkstr='';
        $(".pictures .item.checked").each(function(i,e){
            checkarr.push($(this).data("id"));
        });
        if ($(this).find(".check-sum").text()=="0") {
            $(".check-tips span").text("至少选择 1 张图片");
        }else {
          $("#checkinput").val(checkarr.toString());
          var modalTrigger = $('.btn-checkpic').data('zui.modaltrigger');
          modalTrigger.close();
        }
    })
    var checkarrs = $("#checks").val().split(",");
    $.each(checkarrs,function(i,e){
      $(".pictures .item").each(function(){
          if (e ==$(this).data("id")) {
            $(this).addClass("checked");
          }
      })
    })
</script>
